<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>Roguetastic</title>

</head>

<body style="font-family:Courier New;color:white; overflow-y:hidden;font-size: 100%">
<div id = "wrapper">

<div id="map" style = "position:absolute; overflow-y:hidden; left:20%;width: 800px; height: 550px; overflow-x: auto; background-color:black">
<script type="text/javascript">

var MAP_HEIGHT = 24;
var MAP_WIDTH = 57;
document.write("<table>");	
for (var i = 0 ; i < MAP_HEIGHT; i++)
{
	document.write("   <tr>");
	for (var j = 0; j <MAP_WIDTH;j++)
	{
	    document.write("    		<td align=\"center\"   id =\"" + j + ":" + i + "\">");
		document.write(".");
		document.write("     </td>");
	}
	document.write("</tr>");
}

document.write("</table>");
</script>

<script>



function Creature(name, image, xloc,yloc)
{
	this.name = name
	this.image = image
	this.xloc = xloc
	this.yloc = yloc
	
	this.location=location;
	function location()
	{
		return this.xloc + ":" + this.yloc;
	}
	
	this.draw=draw;
	function draw(x,y)
	{
		if(typeof(x)==='undefined') x = this.xloc;
		if(typeof(y)==='undefined') y = this.yloc;
		
		
		if (x <  0 || y < 0 || x >= MAP_WIDTH || y >= MAP_HEIGHT) 
			return;
		loc = document.getElementById(this.location());
		loc.innerHTML =  '.';
		this.xloc = x;
		this.yloc = y;
		loc = document.getElementById(this.location());
		loc.innerHTML =  this.image		
	}
}


function doKeyDown(evt){
	switch (evt.keyCode) {
		case 98:
		case 40:  /* Down arrow was pressed */
			{
				Avatar.draw(Avatar.xloc,Avatar.yloc+1);
			}
		    break;
		case 104:
		case 38:  /* Up arrow was pressed */
			{
				Avatar.draw(Avatar.xloc,Avatar.yloc-1);
			}
		   break;
		case 100:
		case 37:  /* Left arrow was pressed */
			{
				Avatar.draw(Avatar.xloc-1,Avatar.yloc);
			}
			break;
		case 102:
		case 39:  /* Right arrow was pressed */
			{
				Avatar.draw(Avatar.xloc+1,Avatar.yloc);
			}
		break;
		
	}
}

var Avatar = new Creature("Avatar",'@',4,3);
Avatar.draw();
//loc = document.getElementById(Avatar.location());

//loc.innerHTML =  "@";

//input = document.onkeydown = moveCreature
 

window.addEventListener('keydown',doKeyDown,true);



</script>
</div> <!--End of map div !-->

</div>


</body>
</html>
